<%@page import="java.util.ArrayList"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%
	String baseP = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body,html,#allmap {
	width: 100%;
	height: 100%;
	overflow: hidden;
	margin: 0;
	font-family: "微软雅黑";
}

 .pg-load,.toast {
	bottom: 100px;
	position: absolute;
	height: 60px;
	width: 33%;
	background: rgba(0,0,0,0.5);
	left: 35%;
	right: 35%;
	border-radius:3px;
	color: #ffffff;
	display: none;
 }
 
 .load-msg,.toast-msg {
 	width: 100%;
 	height: 100%;
 	text-align: center;	
 	padding-top: 15px;
	padding-bottom: 15px;
 }
 
 #go_there{margin-left:5px; font-size:14px;color:#4D4D4D ;}
 #go_btn_div{text-align: center;}
 #go_btn_div button{margin: 8px 7px 0 7px; padding: 2px 10px; font-family: "宋体"; background:#FFFFFF; border: solid 1px #A9A9AA;border-radius:3px;width: 50px; height: 28px;}
 #contnet_info{line-height:1.5;font-size:13px; height: 55px;}
 #title_div{overflow: hidden;line-height: 30px; height: 30px;font-size: 12px;}
</style>
<link type="text/css" rel="stylesheet"
	href="<c:url value='/static/theme/3/main.css'/>">
<script type="text/javascript"
	src="http://api.map.baidu.com/api?v=2.0&ak=Wx1DhuFTyrW3fK6Qe5MrQM4T"></script>
<script type="text/javascript"
	src="<c:url value='/static/common/js/jquery-1.11.0.min.js'/>"></script>
 <script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script> 
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<title>地图展示</title>
</head>
<body>
	<div id="allmap"></div>
	<div class="map_bot">
		<!-- <p class="map_bot_p">雷达扫描到您屏幕范围内有</p>-->
		<ul class="map_bot_ul">
			<li onclick="search_2('公安局','4060101',this)" id="ico01" class="ico01">公安驻地</li>
			<li id="ico02" class="ico02" onclick="search_2('车管所','', this)">车管所</li>
			<!-- 屏蔽公安分局与派出所   2014-12-17 -->
			<!-- <li id="ico03" class="ico03" onclick="search('公安分局')">公安分局</li> -->
   			<li id="ico04" class="ico04" onclick="search_2('派出所','4060102',this)">派出所</li>
			<!-- 
    <li id="ico05" class="ico05"> </li>
    <li id="ico06" class="ico06"> </li>
    <li id="ico07" class="ico07"> </li>
    <li id="ico08" class="ico08"> </li>
 -->
		</ul>
	</div>
	<!--
	<div class="map_pop">
      <div class="map_pop_top"></div>
	      <div class="map_pop_mid">
	    	<ul>
	          <li class="jws"> <a href="#">警务室</a> </li>
	          <li class="fj"> <a href="#">分局</a> </li>
	          <li class="pcs"> <a href="#">派出所</a> </li>
	        </ul>
		  </div>
      <div class="map_pop_bot"></div>
    </div>
     -->
</body>
</html>
<script src="<c:url value='/static/theme/police/js/common.js'/>" type="text/javascript"></script>
<script type="text/javascript">
	var g_lat, g_lng = 0;
	var clickObj;
	var my_loac = "";
	var cent_point;
	var infoWindow;
	//信息框内部样式
	var sContent =  "<div id='title_div'></div>"+
		"<hr><div id='contnet_info'></div>" + 
        "<hr><div id='go_btn_div'>"+
        "<span id='go_there'>到这里去</span><br>"+
    	"<button id='btn_gongj'>公交</button><button id='btn_jiac'>驾车</button><button id='btn_bux'>步行</button>"+
			"</div>"+
		"</div>";
	var myIcon;
	var imageSize = new BMap.Size(19,25);
	var mobileHeight = $(document).height();//屏幕高度
	var save_keyword, save_typeID = "";//保存查询条件
	
	$(function() {
		
	});

	var top_right_navigation = new BMap.NavigationControl({
		anchor : BMAP_ANCHOR_TOP_LEFT,
		type : BMAP_NAVIGATION_CONTROL_SMALL,
	});

	var map = new BMap.Map("allmap");
	var point = new BMap.Point(120.5959, 31.303011);
	map.centerAndZoom(point, 13);
	//放大缩小地图
	map.addControl(top_right_navigation);

	var geolocationControl = new BMap.GeolocationControl({
		anchor : BMAP_ANCHOR_TOP_RIGHT,
	});

	geolocationControl.addEventListener("locationError", function(e) {
		finish("定位失败");
	});
	map.addControl(geolocationControl);

	var geolocation = new BMap.Geolocation();
	geolocation.getCurrentPosition(function(r) {
		if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			var mk = new BMap.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			g_lat = r.point.lat;
			g_lng = r.point.lng;
			/* getLocNameByPoint(); */
		} else {
			finish("定位失败");
		}
	}, {
		enableHighAccuracy : true
	});
	
	/* //百度逆地址解析，根据坐标获取具体位置名称
	function getLocNameByPoint(){
		var point = new BMap.Point(g_lng,g_lat);
		var geoc = new BMap.Geocoder();
		geoc.getLocation(point, function(rs){
			my_loac = rs.address;
		});
	} */

	//当地图拖动后再次查询
	function map_move_search(){
		if(save_keyword != "")
			search(save_keyword, save_typeID,clickObj);
	}
	
	var need_moveSearch = true;
	function search_2(keyword, typeID, obj){
		search(keyword, typeID, obj);
		if(need_moveSearch)
			map.addEventListener("dragend", map_move_search);
			need_moveSearch = false;
	}
	
	/*
		检索方法，
		keyword  检索条件字符串
		typeID   ""表示使用百度自己的检索方式，不为空则表示使用数字地图方法查询，typeID内容为查询条件对应的类型ID。
		typeID  :     类型  
		4060101                  公安局
		4060102                 派出所
		4060401                 交巡警
		503                               政府机关
	*/
	function search(keyword, typeID, obj) {
		clickObj = obj;
		changeID(clickObj);
		myIcon = new BMap.Icon("<c:url value='/static/theme/3/images/icon_mark0.png'/>",new BMap.Size(19,25));
		myIcon.setImageSize(imageSize);
		save_keyword = keyword;
		save_typeID = typeID;
		map.clearOverlays();

		var circle = new BMap.Circle(map.getCenter(), 8000, {
			fillColor : "blue",
			strokeWeight : 1,
			fillOpacity : 0.3,
			strokeOpacity : 0.3
		});
		
		if("" == typeID){
			/*--------------------------百度地图查询---------------------------------*/
			var local = new BMap.LocalSearch(map, {
				renderOptions : {
					map : map,
					autoViewport : false,
				}
			});
			var bounds = getSquareBounds(circle.getCenter(), circle.getRadius());
			local.searchInBounds(keyword, bounds);
	
			local.setInfoHtmlSetCallback(function(poi, html) {
			});
			
			local.setMarkersSetCallback(function (resp){
			var allOverlay = map.getOverlays();
			//先去除local.searchInBounds()方法调用后百度添加的标注气泡
			for (var i = 0; i < allOverlay.length ; i++){
					map.removeOverlay(allOverlay[i]);
				}
				//添加自定义标注气泡
				for(var i = 0; i<resp.length; i++ ){
					myIcon.setImageUrl("<c:url value='/static/theme/3/images/icon_mark"+i+".png'/>");
					var marker = new BMap.Marker(resp[i].point,{icon : myIcon});
					var content = resp[i].address;
					var title = resp[i].title;
					var mak_poi = resp[i].point;
					map.addOverlay(marker);
					addClickHandler(content,title,mak_poi,marker);
				}
				map.setZoom(13);
			});
		}else{
			/*-----------------------------数字地图方式查询-----------------------------*/
			var point_array;//数字地图查询到的各点的坐标的数组
			var points = "";//数字地图查询到的各点拼接成的字符串，各坐标间用;分隔
			var isFirst = true;
			var mapPoint_array = [];//存放地点位置的相关信息，主要有：经纬度坐标，地点名称，地点所在街道名称，二维数组
			
			//将百度坐标转换成数字地图的坐标
			$.ajax({
					url:"http://testapi.sz-map.com/test/poi/convert?geometry="+map.getCenter().lng+","+map.getCenter().lat+"&coding=0&encoded=false",
					type:"get",
					dataType:"jsonp",
					timeout: 8000,
					beforeSend: function () {
				         loading();
				    	},
					success:function(resp){
						cent_point = resp.geometry.x + "," + resp.geometry.y;
						//获取数字地图的查询结果
						$.ajax({
							url:"http://testapi.sz-map.com/test/poi/category?categoryId="+typeID+"&geometry="+cent_point+"&coding=0&distance="+circle.getRadius()+"&encoded=false&length=10",
							type:"get",
							dataType:"jsonp",
							timeout: 5000,
							success:function (resp){
								if(resp.success){
									point_array = resp.poiInfo.pois;
									for(i = 0; i< point_array.length; i++){
										if(isFirst){
											points = point_array[i].geometry.x+","+point_array[i].geometry.y;
										}else {
											points += ";" + point_array[i].geometry.x+","+point_array[i].geometry.y;
										}
										mapPoint_array[i] = [];
										mapPoint_array[i][2] = point_array[i].address;
										mapPoint_array[i][3] = point_array[i].name;
										isFirst = false;
									}
								}else {
									finish("查询失败");
								}
								//将数字地图的结果转换成百度的格式显示
								$.ajax({
									url:"http://api.map.baidu.com/geoconv/v1/?coords="+points+"&ak=fW3g9wAHo3EMylkxA8Bv3PHX",
									type:"get",
									dataType:"jsonp",
									timeout: 5000,
									success:function (resp){
										for(i = 0; i< resp.result.length; i++){
											mapPoint_array[i][0] = resp.result[i].x;
											mapPoint_array[i][1] = resp.result[i].y;
											myIcon.setImageUrl("<c:url value='/static/theme/3/images/icon_mark"+i+".png'/>");
											var marker = new BMap.Marker(new BMap.Point(resp.result[i].x,resp.result[i].y),{icon:myIcon});// 创建标注,并设置标注图标
											var content = mapPoint_array[i][2];
											var title = mapPoint_array[i][3];
											var mak_poi = new BMap.Point(mapPoint_array[i][0],mapPoint_array[i][1]);
											map.addOverlay(marker);
											addClickHandler(content,title,mak_poi,marker);
										}
										map.setZoom(13);
									},
									error:function (errormsg){
										finish("查询失败");
									}
								});
								finish();
							},
							error:function (errormsg){
								finish("查询失败");
							}
						});
					},
					error:function(info){
						finish("查询失败");
					}
				});
		}
		//event.stopPropagation();
	}
	
	//地点点击事件
	function addClickHandler(content,title,mak_poi,marker){
			var opts = {
				width: 220,
				height: 150,
			};
			marker.addEventListener("click", function(e){
			infoWindow = new BMap.InfoWindow(sContent,opts);
			infoWindow.addEventListener("open", function(e){
				$("#title_div").text(title);
				$("#contnet_info").text("地址："+content);
				addListener($("#btn_gongj"),mak_poi);
				addListener($("#btn_jiac"),mak_poi);
				addListener($("#btn_bux"),mak_poi);
			});
			this.openInfoWindow(infoWindow);
		});
	}
	
	//添加事件监听
	function addListener(obj,end_poi){
		obj.click(function (e){
		var start_poi = new BMap.Point(g_lng,g_lat);
			switch(e.target.id){
				//公交路线查询
				case "btn_gongj":
					map.clearOverlays();
					var transit = new BMap.TransitRoute(map, {
						renderOptions: {map: map},
					});
					transit.search(start_poi,end_poi);
					transit.setSearchCompleteCallback(function(res){
						if(res.getNumPlans() <= 0)
							finish("未查询到路线");
						map.removeEventListener("dragend", map_move_search);
						need_moveSearch = true;
					});
					break;
				//驾车路线查询
				case "btn_jiac":
					map.clearOverlays();
					var drive = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});
					drive.search(start_poi, end_poi);
					drive.setSearchCompleteCallback(function(res){
						if(res.getNumPlans() <= 0)
							finish("未查询到路线");
						map.removeEventListener("dragend", map_move_search);
						need_moveSearch = true;
					});
					break;
				//步行路线查询
				case "btn_bux":
					map.clearOverlays();
					var walk = new BMap.WalkingRoute(map,{renderOptions:{map: map, autoViewport: true}});
					walk.search(start_poi,end_poi);
					walk.setSearchCompleteCallback(function(res){
						if(res.getNumPlans() <= 0)
							finish("未查询到路线");
						map.removeEventListener("dragend", map_move_search);
						need_moveSearch = true;
					});
					break;
			}
		});
	}
	
	function getSquareBounds(centerPoi, r) {
		var a = Math.sqrt(2) * r;

		mPoi = getMecator(centerPoi);
		var x0 = mPoi.x, y0 = mPoi.y;

		var x1 = x0 + a / 2, y1 = y0 + a / 2;
		var x2 = x0 - a / 2, y2 = y0 - a / 2;

		var ne = getPoi(new BMap.Pixel(x1, y1)), sw = getPoi(new BMap.Pixel(x2,
				y2));
		return new BMap.Bounds(sw, ne);

	}

	function getMecator(poi) {
		return map.getMapType().getProjection().lngLatToPoint(poi);
	}

	function getPoi(mecator) {
		return map.getMapType().getProjection().pointToLngLat(mecator);
	}
	
	var objID;
	function changeID(obj){
		if(typeof obj === "undefined"){
			return;
		}
			if("" != objID && null != objID){
				$("."+objID).attr("id",objID);
			}
			objID = obj.className;
			obj.id = objID + "_hover";
	}
	
</script>